<template>
   <div>
    <!-- 搜素 -->
    <div class="search flex">
        <input type="text" placeholder="输入uid或者用户名" maxlength="15" v-model="keyword" @input="getLength($event.target)">
        <p>{{15-length}}</p>
        <i class="el-icon-search"></i>
    </div>
    <!-- 好友申请 -->
    <button class="box flex" @click="SETCONTENT([2,'好友申请'])">
       <img :src="require('@/assets/default/message/ApplyFriend.png')" class="icon">
       <div>好友申请</div>
       <div class="count" v-if="FriendRecordCount>0">{{FriendRecordCount}}</div>
    </button>
      
      
   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
    
       ...mapState('Inform',['FriendRecordCount'])
     },
     data() {
        return {
            length:0,
            keyword:null,
        }
     },
     methods:{
        ...mapMutations('Chat',['SETCONTENT']),
          getLength(e){
			 this.length = e.value.trimLeft().length
			 this.keyword = e.value.trimLeft()
        },
     }
  }
</script>
<style scoped lang='less'>
// 搜索
.search{
    width: 100%;
    border: 1px var(--GeneralBackColor) solid;
    border-radius: 20px;
    padding:10px 2px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    margin-bottom: 15px;

    input{
        width: 70%;
    }
    p{margin-right: 5px;}
}
//好友申请
.box{
    width: 100%;
    position: relative;
    justify-content: flex-start;

    .icon{
        width: 45px;
        height: 45px;
        margin-right: 5px;
    }
   
}
</style>